function swiper() {
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        // effect : 'cube',
        autoplay: true,

        // 如果需要分页器 
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })
}
//获取数据
class List {
    constructor() {
        //获取节点
        this.div = document.querySelector('#recommend >.content')
        this.sel = document.querySelector('.select')
        this.nv = document.querySelectorAll('#nav >.content>.conten > ul >li')
        this.selli = document.querySelectorAll('#banner >.content >.conten >.select >li')
        //初始化
        this.init()
    }
    //初始化
    init() {
        this.header_footer()
        this.request()
        this.pag()
        // this.login()
        // this.cartNum()
    }
    //获取头尾
    header_footer() {
        $('header').load('/html/header.html', () => {
            /**显示用户登录与商品数量 */
            function login() {
                let num = 0
                //取出数据用户数据
                let list = JSON.parse(localStorage.getItem('userkey')) || []
                //取出商品数据
                let lis = JSON.parse(localStorage.getItem('cart'))
                for (let i = 0; i < lis.length; i++) {
                    num += lis[i].cart_number
                }
                if (list == '') {
                    $('.cartt').html('请登录')
                    $('.oidnum').html('0')
                } else {
                    $('.cartt').html(list.name + '&nbsp;&nbsp;' + '欢迎你')

                    $('.oidnum').html(num)
                }
                //一天清除数据
                setInterval(() => {
                    localStorage.removeItem('userkey')
                }, 60000)
            }
            login()
        })
        $('footer').load('/html/footer.html')
    }
    //请求数据
    request() {
        pAjax({
                url: '/libs/goods.json',
            })
            //接收请求的返回数据
            .then(res => {
                let data = JSON.parse(res)
                // 获取40个数据
                data = data.slice(0, 200)
                //传参
                this.render(data)
            })
    }
    //渲染数据
    render(data) {
        this.div.innerHTML = ''
        data.forEach(item => {
            this.div.innerHTML += `
            <div class="a">
                <a href="/html/commodity.html?id=${item.goods_id}">
                   <img src="${item.img_big_logo}" alt="">
                   <p class="as">${item.title}</p>
                </a>
                    <p class="money">￥<span>${item.price}</span></p>
            </div>
            `
        })
        this.paging()
        // $('.paging_box').css('display','block')
    }
    // login() {
    //     //取出数据
    //     let list = JSON.parse(localStorage.getItem('userkey')) || []
    //     if (list == '') {
    //         this.name.innerHTML = '请登录'
    //     } else {
    //         this.name.innerHTML = list.name + '&nbsp;&nbsp;' + '欢迎你'
    //     }
    //     //一天清除数据
    //     setInterval(() => {
    //         localStorage.removeItem('userkey')
    //     }, 60000)
    // }

    //下拉菜单
    pag() {
        for (let i = 0; i < this.nv.length; i++) {
            //给元素绑定自定义属性
            this.nv[i].setAttribute('index', i)
            //鼠标移入事件
            //改变this的指向
            let _this = this
            this.nv[i].onmouseover = function () {
                //获取自定义属性
                let index = this.getAttribute('index')
                //清除所有内容
                for (let j = 0; j < _this.selli.length; j++) {
                    _this.sel.innerHTML = ''
                }
                //赋值内容
                _this.sel.innerHTML = _this.selli[index].innerHTML
                _this.sel.style.zIndex = '2'
                _this.sel.style.display = 'block'

            }
            this.sel.onmouseout = () => {
                this.sel.style.zIndex = '0'
                this.sel.style.display = 'none'
            }
            this.nv[i].onmouseout = (e) => {
                //如果距离页面小于184就隐藏
                if (e.pageY < 184) {
                    this.sel.style.zIndex = '0'
                    this.sel.style.display = 'none'
                }
            }
        }
    }
    //加入购物车数量
    // cartNum(){
    //     //设置一个num
    //     let num = 0
    //     //获取localStorage数据
    //     let list = JSON.parse(localStorage.getItem('cart'))
    //     for(let i=0;i<list.length;i++){
    //         num +=list[i].cart_number
    //     }
    //     console.log(num);
    //    this.num.innerHTML = num
    // }
    //分页
    paging() {
        $("#recommend>.content").paging({
            PageNum: 20, //每页显示数目
            pageMax: true, //按钮长度是否显示
            pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
            pageDownUpHide: true, //到第一个或最后一个是否让上一页或下一页消失
            pageInput: true, //是否使用文本框输入跳转
            pagingBtnHide: false, //是否让按钮变为一个
            pagingBtnPaging: true, //按钮是否分页
            pagingDisplay: 'flex' //显示的属性，弹性盒子还是块化
        })
    }
}
new List()
swiper()